<template>
  <RouterView />
  <div class="back" v-if="showBackButton" @click="$router.back()"><img src="@/assets/imgs/back.png" alt=""></div>
</template>

<script setup lang="ts">
import { RouterView } from "vue-router"
document.title = import.meta.env.VITE_APP_WEB_NAME

import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const showBackButton = ref(false);

// 更新返回按钮的显示状态
const updateBackButtonVisibility = (currentRoute) => {
  const hideOnRoutes = ['/', '/home']; // 在这些路由下隐藏按钮
  showBackButton.value = !hideOnRoutes.includes(currentRoute.path);
};

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    updateBackButtonVisibility({ path: newPath });
  },
  { immediate: true } // 初始化时立即执行一次
);

// 返回上一页
const goBack = () => {
  router.go(-1);
};

</script>
<style scoped>
.back {
  position: fixed;
  top: 120px;
  right: 30px;
  width: 30px;
  height: 30px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back img {
  width: 100%;
  height: 100%;
}
</style>
